<template>
  <div class="page-wrap">
    <TableFilter
      :data="filter"
      v-model="query"
      ref="filter"
      @change="changeFilter"
    ></TableFilter>
    <div class="top-info">
      <div class="info-item info-item1">
        <img src="@/assets/img/icon1.png" class="item-icon" />
        <div class="texts">
          <div class="text-item">结算病例数：{{ topInfo.总例数 }}</div>
          <div class="text-item">入组病例数：{{ topInfo.入组例数 }}</div>
          <div class="text-item">入组率：{{ topInfo.入组率 }}%</div>
        </div>
      </div>
      <div class="info-item info-item2">
        <img src="@/assets/img/icon2.png" class="item-icon" />
        <div class="texts">
          <div class="text-item">DRG组数：{{ topInfo.DRG组数 }}</div>
          <div class="text-item">DRG权重：{{ topInfo.DRG权重 }}</div>
          <div class="text-item">MDC组数：{{ topInfo.MDC组数 }}</div>
        </div>
      </div>
      <div class="info-item info-item3">
        <img src="@/assets/img/icon3.png" class="item-icon" />
        <div class="texts">
          <div class="text-item">住院总盈亏：{{ topInfo.住院总盈亏 }}</div>
          <div class="text-item">人均盈亏：{{ topInfo.平均盈亏 }}</div>
          <div class="text-item">平均床日：{{ topInfo.平均床日 }}</div>
        </div>
      </div>
      <div class="info-item info-item5">
        <img src="@/assets/img/icon5.png" class="item-icon" />
        <div class="texts">
          <div class="text-item">例均费用：{{ topInfo.例均费用 }}</div>
          <div class="text-item">平均药占比：{{ topInfo.平均药占比 }}</div>
          <div class="text-item">平均耗材占比：{{ topInfo.平均耗材占比 }}</div>
        </div>
      </div>
      <div class="info-item info-item4">
        <img src="@/assets/img/icon4.png" class="item-icon" />
        <div class="texts">
          <div class="text-item">费用消耗指数：{{ topInfo.费用消耗指数 }}</div>
          <div class="text-item">时间消耗指数：{{ topInfo.时间消耗指数 }}</div>
          <div class="text-item">CMI：{{ topInfo.CMI }}</div>
        </div>
      </div>
    </div>
    <div class="charts" v-loading="loading">
      <ColumnarEcharts
        :topInfo="topInfo"
        :keyVal="item.key"
        width="550"
        height="400"
        :chartsData="item.values"
        :topTitle="item.title"
        v-for="item in charts"
        :key="item.title"
      />
    </div>
  </div>
</template>

<script>
import ColumnarEcharts from "@/components/columnarEcharts/index.vue";
import dayjs from "@/utils/dayjs.min.js";
import { rptRzqkfx } from "@/api/report";
import TableFilter from "@/components/TableFilter";
import { dept2doc } from "@/api/patient";
export default {
  components: { ColumnarEcharts, TableFilter },
  data() {
    return {
      loading: false,
      deptList: [],
      chartsData: [],
      topInfo: {},
      charts: [
        { title: "科室总权重", values: {}, key: "DRG权重" },
        { title: "CMI", values: {}, key: "CMI" },
        { title: "平均床日", values: {}, key: "平均床日" },
        { title: "费用消耗指数", values: {}, key: "费用消耗指数" },
        { title: "时间消耗指数", values: {}, key: "时间消耗指数" },
        { title: "盈亏（万元）", values: {}, key: "住院总盈亏" }
      ],
      query: {
        dept: "",
        lb: 1,
        timeType: 0,
        kssj: dayjs()
          .subtract(1, "month")
          .format("YYYY-MM-DD"),
        jssj: dayjs().format("YYYY-MM-DD")
      }
    };
  },
  computed: {
    filter() {
      return {
        date: {
          props: {
            options: [{ label: "时间段", value: 0 }],
            isTwoRange: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          keys: ["timeType", "kssj", "jssj"]
        },
        inline: [
          {
            props: {
              multiple: true,
              label: "科室",
              is: "el-select",
              options: this.deptList
            },
            keys: "dept"
          }
        ]
      };
    }
  },
  created() {
    this.getTopInfo();
    this.getDepts();
  },
  methods: {
    async getDepts() {
      let d = await dept2doc({ t: dayjs().format("YYYYMMDD") });

      d = d.data || [];
      let deptts = Array.from(new Set(d.map(it => it.科室)));
      this.deptList = [...deptts.map(it => ({ label: it, value: it }))];
    },
    async getTopInfo() {
      this.loading = true;
      const res = await rptRzqkfx(this.query);
      this.topInfo = res.data[0];
      localStorage.setItem("staticInfo", res.data[0]);
      this.getEchartsDatas();
    },
    async getEchartsDatas() {
      const res = await rptRzqkfx({ ...this.query, lb: 2 });
      this.charts.forEach(it => {
        it.values = {
          xData: res.data.map(v => v.科室),
          yData: res.data.map(v =>
            it.key === "住院总盈亏" ? (v[it.key] / 10000).toFixed(2) : v[it.key]
          )
        };
      });
      this.loading = false;
    },
    changeFilter(e) {
      let data = {
        ...e
      };
      for (let key in data) {
        if (!data[key] && data[key] != 0) delete data[key];
      }
      this.query = data;

      this.getTopInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrap {
  padding: 20px;
}
.top-info {
  display: flex;
  justify-content: space-between;
  .info-item {
    width: 18%;
    height: 120px;
    background: #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 20px;
    .item-icon {
      margin-right: 20px;
    }
    .texts {
      font-weight: bold;
      color: #fff;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .info-item1 {
    background-color: #0071e1;
  }
  .info-item2 {
    background-color: #0ab2c1;
  }
  .info-item3 {
    background-color: #76b1b8;
  }
  .info-item4 {
    background-color: #618ddd;
  }
  .info-item5 {
    background-color: #9dc880;
  }
}
.charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}
</style>
